<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
	export default {
    name: 'PieChart',
    props: ['data'],
	  data() {
      return {
      }
    },
    mounted() {
      this.drawChart()
    },
    watch: {
      'data.data': function(val) {
        this.drawChart()
      },
      deep: true
    },
    methods: {
      drawChart() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.$echarts.init(this.$el)
        // 绘制图表
        let colors = ['#FC5D5E', '#FEB80E', '#56A8EE', '#259B24']
        this.myChart.setOption({
          title: {
            text: '单位: ' + this.data.unit,
            top: '0',
            right: '0',
            textStyle: {
              color: '#929292',
              fontWeight: 'normal',
              fontSize: '12'
            },
          },
          silent: true,
          color: colors,
          legend: {
            show: false,
          },
          series: [
            {
              name:'访问来源',
              type:'pie',
              radius: ['70%', '100%'],
              center: ["50%", "50%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: this.data.data
            }
          ]
        })
        window.addEventListener('resize', () => {
          this.myChart.resize()
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  .chart {
    width: 100%;
    height: 100%;
  }
</style>
